<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交易统计</title>    <!--引人样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="app">
    <div class="block">
        <div style="padding-bottom: 10px;margin-top: 10px">
            <span>选择查询的时间段</span>
        </div>
        <el-date-picker
                v-model="date1"
                type="date"
                placeholder="选择日期">
        </el-date-picker>
        <span>至</span>
        <el-date-picker
                v-model="date2"
                type="date"
                placeholder="选择日期">
        </el-date-picker>
        <el-button type="primary" @click="fetchData()">查询</el-button>
    </div>

    <el-table
            :data="tableData"
            border
            style="width: 100%;margin-bottom: 50px; font-size: 10px ">
        <el-table-column
                prop="visitPeopleNum"
                label="浏览人数"
                width="180">
        </el-table-column>
        <el-table-column
                prop="orderPeopleNum"
                label="下单人数"
                width="180">
        </el-table-column>
        <el-table-column
                prop="orderNum"
                label="订单数"
                width="180">
        </el-table-column>
        <el-table-column
                prop="orderTotalNum"
                label="下单件数"
                width="180">
        </el-table-column>
        <el-table-column
                prop="effectiveOrderNum"
                label="有效订单数"
                width="180">
        </el-table-column>
        <el-table-column
                prop="orderMoney"
                label="下单金额"
                width="180">
        </el-table-column>
    </el-table>
    <el-table
            :data="tableData"
            border
            style="width: 100%;margin-bottom: 50px;font-size: 10px">
        <el-table-column
                prop="refundMoney"
                label="退款金额"
                width="180">
        </el-table-column>
        <el-table-column
                prop="payPeopleNum"
                label="付款人数"
                width="180">
        </el-table-column>
        <el-table-column
                prop="payOrderNum"
                label="付款订单数"
                width="180">
        </el-table-column>
        <el-table-column
                prop="payOrderTotalNum"
                label="付款件数"
                width="180">
        </el-table-column>
        <el-table-column
                prop="payTotalMoney"
                label="付款金额"
                width="180">
        </el-table-column>
        <el-table-column
                prop="paySingleMoney"
                label="客单价"
                width="180">
        </el-table-column>
    </el-table>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main1" style="width: 1200px;height:400px;"></div>

    <div id="main2" style="width: 1200px;height:400px;"></div>


</div>

</body>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/elementui.js"></script>
<script src="../js/util.js"></script>
<script src="../js/echarts.js"></script>

<script>
    new Vue({
        el:"#app",
        data(){
            return {
                tableData:[],
                date1:'',//必须为空，即使有默认值，点击查询也没用
                date2:'',//同上





            }

        },
        methods:{
            fetchData() {
                let date1 = this.date1.Format("yyyy-MM-dd");//util中自己写的方法
                let date2 = this.date2.Format("yyyy-MM-dd");

                axios.get(`/tradeReport/tradeCount.do?date1=${date1}&date2=${date2}`).then(response=>{
                    this.tableData = response.data;

                //漏斗图

                //浏览
                let value1=this.tableData[0].visitPeopleNum;
                //下单
                let value2=this.tableData[0].orderNum;
                //付款
                let value3=this.tableData[0].payOrderNum;


                // 基于准备好的dom，初始化echarts实例
                let myChart1 = echarts.init(document.getElementById('main1'));

                let option1 = {
                    title: {
                        text: '交易数据分析图',
                        subtext: '交易统计',
                        textStyle: {
                            fontSize: 18
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    toolbox: {
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    legend: {
                        data: ['浏览','下单','付款']
                    },

                    series: [
                        {
                            name:'漏斗图',
                            type:'funnel',
                            left: '10%',
                            top: 60,
                            //x2: 80,
                            bottom: 60,
                            width: '80%',
                            // height: {totalHeight} - y - y2,
                            min: 0,
                            max: 100,
                            minSize: '0%',
                            maxSize: '100%',
                            sort: 'descending',
                            gap: 2,
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            labelLine: {
                                length: 10,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    fontSize: 20
                                }
                            },
                            data: [
                                {value: value1, name: '浏览'},
                                {value: value2, name: '下单'},
                                {value: value3, name: '付款'}
                            ]
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option1);


            });
                this.tradeReport();

            },
            tradeReport(){
                let date1 = this.date1.Format("yyyy-MM-dd");//util中自己写的方法
                let date2 = this.date2.Format("yyyy-MM-dd");

                axios.get(`/tradeReport/tradeCount2.do?date1=${date1}&date2=${date2}`).then(response=>{

                    let payTotalMoney=new Array();//付款金额
                    let refundMoney=new Array();//退款金额
                    let payPeopleNum=new Array();//付款人数
                    let payOrderTotalNum=new Array();//付款件数
                    // let visitPeopleNum=new Array();//浏览人数
                    // let orderPeopleNum=new Array();//下单人数
                    let orderRate=new Array();//下单转化率
                    let payRate=new Array();//付款转化率
                    let sucessRate=new Array();//成交转化率

                    let countDate=new Array();//查询的日期

                    for(let i=0;i<response.data.length;i++){
                        payTotalMoney.push(response.data[i].payTotalMoney);
                        refundMoney.push(response.data[i].refundMoney);
                        payPeopleNum.push(response.data[i].payPeopleNum);
                        payOrderTotalNum.push(response.data[i].payOrderTotalNum);
                        countDate.push(response.data[i].countDate);
                        orderRate.push((response.data[i].orderPeopleNum/response.data[i].visitPeopleNum).toFixed(2) * 100);
                        payRate.push((response.data[i].payPeopleNum/response.data[i].orderPeopleNum).toFixed(2) * 100);
                        sucessRate.push((response.data[i].payPeopleNum/response.data[i].visitPeopleNum).toFixed(2) * 100);
                    }

                    // alert(date1);
                    // alert(date2);
                    // alert("日期:"+countDate[0]);
                    // alert("付款人数"+payPeopleNum);
                    // alert("付款金额:"+payMoney[0]);


                    //折线图
                    //日期段

                // 基于准备好的dom，初始化echarts实例
                let myChart2 = echarts.init(document.getElementById('main2'));

                // 指定图表的配置项和数据
                let option2 = {
                    title: {
                        text: '交易统计分析走势图',
                        textStyle: {
                            fontSize: 18
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['付款金额', '退款金额', '付款人数', '付款件数', '下单转化率(%)','付款转化率(%)','成交转化率(%)']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true //grid 区域是否包含坐标轴的刻度标签。常用于『防止标签溢出』的场景
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        data: countDate
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '付款金额',
                            type: 'line',
                            stack: '总量',
                            // data: [120, 132, 101, 134, 90, 230, 210]
                            data: payTotalMoney
                        },
                        {
                            name: '退款金额',
                            type: 'line',
                            stack: '总量',
                            data: refundMoney
                        },
                        {
                            name: '付款人数',
                            type: 'line',
                            stack: '总量',
                            data: payPeopleNum
                        },
                        {
                            name: '付款件数',
                            type: 'line',
                            stack: '总量',
                            data: payOrderTotalNum
                        },
                        {
                            name: '下单转化率(%)',
                            type: 'line',
                            stack: '总量',
                            data: orderRate
                        },
                        {
                            name: '付款转化率(%)',
                            type: 'line',
                            stack: '总量',
                            data: payRate
                        },
                        {
                            name: '成交转化率(%)',
                            type: 'line',
                            stack: '总量',
                            data: sucessRate
                        }
                    ]
                };


                // 使用刚指定的配置项和数据显示图表。
                myChart2.setOption(option2);


                });
            }
        }
    })
</script>
</html>